<template>
	<view class="container">
		<!-- 左上角X号按钮 -->
		<view class="close-btn" @click="handleClose">
			<text class="x-icon">×</text>
		</view>
		<!-- 页面内容 -->
		<view class="page-content">
			<view class="title">手机号登录</view>
			<view class="form-box">
				<view class="form-row">
					<view class="label">手机号</view>
					<input class="input" v-model="phone" type="number" placeholder="请填写手机号码"
						placeholder-class="input-placeholder" />
				</view>
				<!-- 验证码输入和按钮 -->
				<view class="form-row code-row">
					<view class="label">验证码</view>
					<input class="input" v-model="code" type="text" placeholder="请填写验证码"
						placeholder-class="input-placeholder" />
					<button class="code-btn" :disabled="!canSendCode || codeTime > 0" @click="handleSendCode">{{ codeTime > 0 ?
            codeTime + '秒' : '获取验证码' }}</button>
				</view>

			</view>
			<view class="other-login">
				<text class="other-login-link" @click="login">用密码登录</text>
			</view>
		</view>
		<view class="content-bottom">
			<button class="submit-btn" @click="handleLogin">登录</button>
			<view class="bottom-links">
				<text class="bottom-link">找回密码</text>
				<text class="divider">｜</text>
				<text class="bottom-link">冻结账号</text>
				<text class="divider">｜</text>
				<text class="bottom-link">更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request.js";
	export default {
		data() {
			return {
				phone: "",
				password: "",
				code: "",
				canSendCode: false,
				codeTimer: null,
				codeTime: 0,
			};
		},
		watch: {
			phone(val) {
				// 手机号格式校验
				const phoneReg = /^1\d{10}$/;
				this.canSendCode = phoneReg.test(val);
			},
		},
		mounted() {
			// 获取路由参数或本地缓存
			const query = this.$root.$mp.query || {};
			this.phone = query.phone || uni.getStorageSync("regPhone") || "";
		},
		methods: {
			// X号按钮点击事件
			handleClose() {
				// 这里可以根据需求实现关闭逻辑
				// 例如返回上一页
				uni.navigateBack({
					delta: 1,
				});
			},
			//跳转密码页面
			login() {
				uni.navigateTo({
					url: "/pages/loginCom/loginCom?phone=" + this.phone,
				});
			},
			// 获取验证码
			handleSendCode() {
				if (this.codeTime > 0) return;
				uni.showToast({
					title: "验证码已发送",
					icon: "none"
				});
				this.codeTime = 59;
				this.codeTimer = setInterval(() => {
					if (this.codeTime > 0) {
						this.codeTime--;
					} else {
						clearInterval(this.codeTimer);
						this.codeTimer = null;
					}
				}, 1000);
			},
			//登录
			async handleLogin() {
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					});
					return;
				}
				// 手机号格式校验
				const phoneReg = /^1\d{10}$/;
				if (!phoneReg.test(this.phone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none"
					});
					return;
				}

				// 校验手机号和密码
				const regPhone = uni.getStorageSync("regPhone");
				const regPassword = uni.getStorageSync("regPassword");
				if (this.phone !== regPhone || this.password !== regPassword) {
					uni.showToast({
						title: "账号或密码错误",
						icon: "none"
					});
					return;
				}
				await request({
						url: "/auth/login",
						method: "POST",
						data: {
							phone: this.phone,
							password: this.password,
						},
					})
					.then((res) => {
						console.log(res);
					})
					.catch((err) => {
						console.log(err);
					});
				// 校验通过，跳转到我的页面
				uni.switchTab({
					url: "/pages/my/my"
				});
			},
		},
		beforeDestroy() {
			if (this.codeTimer) {
				clearInterval(this.codeTimer);
				this.codeTimer = null;
			}
		},
	};
</script>

<style scoped>
	.container {
		/* 确保内容不会被导航栏遮挡 */
		padding: 44px 20px 0 20px;
		background: #fff;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* X号按钮样式 */
	.close-btn {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.x-icon {
		font-size: 24px;
		color: #333333;
		line-height: 1;
	}

	.page-content {
		padding: 16px;
	}

	.title {
		text-align: center;
		font-size: 22px;
		font-weight: 500;
		margin: 24px 0 32px 0;
		color: #222;
	}

	.form-box {
		background: #fff;
		border-radius: 8px;
		padding: 0 0 8px 0;
		margin-bottom: 24px;
	}

	.form-row {
		display: flex;
		align-items: center;
		padding: 0 0 0 0;
		height: 48px;
		border-bottom: 1px solid #f2f2f2;
	}

	.label {
		width: 80px;
		color: #222;
		font-weight: 400;
		font-size: 15px;
	}

	.country {
		flex: 1;
		color: #888;
		font-size: 15px;
	}

	.country-code {
		color: #888;
		font-size: 14px;
		margin-left: 2px;
	}

	.input {
		flex: 1;
		border: none;
		outline: none;
		background: transparent;
		font-size: 15px;
		color: #222;
		padding: 0;
	}

	.input-placeholder {
		color: #ffff;
		font-size: 15px;
		/* margin-left: 30px; */
	}

	.other-login {
		text-align: left;
		margin-top: 8px;
	}

	.other-login-link {
		color: #4a90e2;
		font-size: 14px;
		text-decoration: none;
		cursor: pointer;
	}

	.content-bottom {
		margin-top: 17.25rem;
	}

	.phone-tip {
		color: #bbb;
		font-size: 13px;
		text-align: center;
		margin: 32px 0 16px 0;
	}

	.submit-btn {
		width: 80%;
		margin: 0 auto;
		display: block;
		background: #1aad19;
		color: #fff;
		font-size: 17px;
		border: none;
		border-radius: 4px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		margin-bottom: 32px;
	}

	.bottom-links {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 16px;
		color: #888;
		font-size: 14px;
	}

	.bottom-link {
		color: #4a90e2;
		margin: 0 4px;
		cursor: pointer;
	}

	.divider {
		color: #bbb;
		margin: 0 2px;
	}

	.code-row {
		display: flex;
		align-items: center;
		height: 48px;
		border-bottom: 1px solid #f2f2f2;
	}

	.code-btn {
		margin-left: 10px;
		background: #f5f5f5;
		color: #333;
		font-size: 14px;
		border-radius: 4px;
		height: 32px;
		line-height: 32px;
		padding: 0 12px;
		border: none;
	}

	.code-btn:disabled {
		background: #eee;
		color: #bbb;
	}
</style>